<template>
  <div class="mask-modal-tip"></div>
  <div class="modal-box" :style="modalBoxStyle">
    <div class="header">
      <slot name="default"></slot>
    </div>
    <div class="content">
      <slot name="default"></slot>
    </div>
    <div class="footer" v-if="footerVisible">
      <slot name="footer">
        <div class="footer__btn">
          <a-button type="primary">上一步</a-button>
          <a-button type="primary">下一步</a-button>
        </div>
      </slot>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onBeforeUnmount, onMounted } from "vue";

type Props = {
  modelValue: number;
  radius: string;
  footerVisible: boolean;
};

type Options = {
  target: string;
};
const props = withDefaults(defineProps<Props>(), {
  radius: "1.0417vw",
  modelValue: 0,
  footerVisible: false,
});

const modalBoxStyle = ref();
let stylesList: any[] = [];

// 判断是否是HTMLElment
const isHTMLElement = (element: any): element is HTMLElement => {
  return element instanceof HTMLElement;
};

const initStyleList = (dom: HTMLElement) => {
  let style: any = {};
  style.width = dom.clientWidth + "px";
  style.height = dom.clientHeight + "px";
  style.top = dom.offsetTop + "px";
  style.left = dom.offsetLeft + "px";
  stylesList.push(style);
};

let _this: any;
const init = (domId: string | HTMLElement, _data: Options | HTMLElement) => {
  stylesList = [];
  let parentDom;
  if (!isHTMLElement(domId)) {
    // 判断 Id 是否添加 #
    domId.includes("#") ? "" : (domId = "#" + domId);
    parentDom = document.querySelector(domId);
  } else {
    parentDom = domId;
  }
  if (isHTMLElement(_data)) {
    initStyleList(_data);
  } else {
    let childs = parentDom?.querySelectorAll(_data.target)!;
    childs.forEach((dom: Element) => {
      initStyleList(dom);
    });
  }
  _this = {
    domId,
    _data,
  };
  modalBoxStyle.value = stylesList[props.modelValue];
};

// computed 样式
const radiusComputed = computed(() => {
  return props.radius;
});

defineExpose({
  init,
});
const init_resize = () => {
  init(_this.domId, _this._data);
};
onMounted(() => {
  window.addEventListener("resize", init_resize);
});

onBeforeUnmount(() => {
  window.removeEventListener("resize", init_resize);
});
</script>
<style scoped lang="less">
.mask-modal-tip {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 99;
}
.modal-box {
  position: absolute;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  z-index: 9999;

  background-color: rgba(0, 0, 0, 0.1);
  .content {
    flex: 1;
  }
  .footer {
    padding: 10px;
    .footer__btn {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      gap: 12px;
      & > button {
        width: 60px !important;
        height: 30px !important;
        padding: 0 !important;
        font-size: 12px !important;
      }
    }
  }
}
</style>
